<template>
	<view class="content">

			<view class="title1" @click="title1" :class="{'indx':title_l}">
				现代诈骗
			</view>
			<view class="title2" @click="title2" :class="{'indx':title_r}">
				古代诈骗
			</view>


		<view class="cent1" v-show="cent==1">
			<view class="tab">
				<view class="tab-box">
					<view class="text" :class="{'active':isActive1==1}" @click="checked1(1)">全部
						<view class="text-bot"></view>
					</view>
					<view class="text" :class="{'active':isActive1==2}" @click="checked1(2)">精选
						<view class="text-bot"></view>
					</view>
					<view class="text" :class="{'active':isActive1==3}" @click="checked1(3)">视频
						<view class="text-bot"></view>
					</view>
			
			
				</view>
			</view>
			<!-- 第一界面 -->
			<view :class="{'nav_item':isActive1==1}" v-if="isActive1==1">
				<view class="lunbo">
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" circular="true">
						<swiper-item>
							<view class="swiper-item">
								<image src=""							
								mode=""></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image src="https://img0.baidu.com/it/u=15033324,253441159&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" mode="">
								
								
								</image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image src="https://img1.baidu.com/it/u=2302692214,4072103668&fm=253&fmt=auto&app=120&f=JPEG?w=450&h=601" mode="">
								</image>
							</view>
						</swiper-item>
						
					</swiper>
				</view>
				<view class="show">
							<view class="leixing" @click="to_leixing">
								<!-- 诈骗类型手法 -->
								<view class="show_name">
									诈骗类型
								</view>
								<image src="../../static/tobbg.png" mode=""></image>
								
							</view>
							<view class="duice" @click="to_duice">
								<!-- 对策 -->
								<view class="show_name">
									诈骗对策
								</view>
								<image src="../../static/tobbg.png" mode=""></image>
							</view>
						</view>
				<view class="">
					
				</view>
				<view class="news" v-if="item.type==0" @click="to_new_wenzhang(index)"  v-for="(item,index) in new_wenzhang">
					<view class="news_title">
						<rich-text :nodes="item.wz_title"></rich-text>
					</view>
					<view class="news_buttom">
						<view class="news_img">
							<image :src="item.wz_img" mode=""></image>
						</view>
						<view class="news_main">
							<view class="news_cont">
								<rich-text :nodes="item.wz_content"></rich-text>
							</view>
							<view class="news_peo">
								<rich-text :nodes="item.user_name"></rich-text>
							
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<!-- 第二个界面 -->
			<view :class="{'nav_item':isActive1==2}" v-if="isActive1==2">
				<view class="wenzhang" >
					<scroll-view class="find_scl" scroll-y="true" key="key"
						
						> 
						<view class="scr_left" >
							
							<block v-for="(item,index) in new_wenzhang">
								<view class="img_view" v-if="item.type==0&&index%2==0"  @click="to_new_wenzhang(index)">
									<view class="scr_img">
										<image :src="item.wz_img" mode="widthFix" 
											></image>
									</view>
									<view class="jieshao">
										<view class="people_title">
											{{item.wz_title}}
										</view>
										<view class="people_inf">
											<view class="people_img">
											<image :src="item.user_img" mode="widthFix"
												></image>
										</view>	
										<view class="people_name">
											{{item.user_name}}
										</view>
										</view>
									</view>
									
									
								</view>
							
								<view class="img_view" v-if="item.type==1&&index%2==0" @click="to_new_shipin(index)">
									<view class="scr_img">
										<image :src="item.wz_img" mode="widthFix" 
											></image>
									</view>
									<view class="jieshao">
										<view class="people_title">
											{{item.wz_title}}
										</view>
										<view class="people_inf">
											<view class="people_img">
											<image :src="item.user_img" mode="widthFix"
												></image>
										</view>	
										<view class="people_name">
											{{item.user_name}}
										</view>
										</view>
									</view>
									
									
								</view>
							</block>
							
							
						</view>
						<view class="scr_right"  >
							<block  v-for="(item,index) in new_wenzhang">
								<view class="img_view" v-if="item.type==0&&index%2==1"  @click="to_new_wenzhang(index)">
									<view class="scr_img">
										<image :src="item.wz_img" mode="widthFix" 
											></image>
									</view>
									<view class="jieshao">
										<view class="people_title">
											{{item.wz_title}}
										</view>
										<view class="people_inf">
											<view class="people_img">
											<image :src="item.user_img" mode="widthFix"
												></image>
										</view>	
										<view class="people_name">
											{{item.user_name}}
										</view>
										</view>
									</view>
									
									
								</view>
						
								<view class="img_view" v-if="item.type==1&&index%2==1"  @click="to_new_shipin(index)">
									<view class="scr_img">
										<image :src="item.wz_img" mode="widthFix" 
											></image>
									</view>
									<view class="jieshao">
										<view class="people_title">
											{{item.wz_title}}
										</view>
										<view class="people_inf">
											<view class="people_img">
											<image :src="item.user_img" mode="widthFix"
												></image>
										</view>	
										<view class="people_name">
											{{item.user_name}}
										</view>
										</view>
									</view>
									
									
								</view>
							</block>
						</view>
				
					</scroll-view>
				
				</view>
				
			</view>
			<!-- 第三个界面 -->
			<view :class="{'nav_item':isActive1==3}" v-if="isActive1==3">
				<!-- <view class="tuijian">
					<view class="cainixihuan">
						<text>猜你喜欢</text>
					</view>
					<view class="mb">
						<view class="mb2">
				
						</view>
					</view>
					<view class="yonghu" v-for="(item,index) in people" :key="index">
						<view class="yonghu_left">
							<image src="../../static/logo.png" mode=""></image>
						</view>
						<view class="yonghu_center">
							<view class="yonghu_center_name">
								{{item.name}}
							</view>
							<view class="yonghu_center_introduce">
								{{item.introduce}}
							</view>
						</view>
						<view class="yonghu_right">
							关注
						</view>
					</view>
				</view> -->
				<view class="shipin" v-if="item.type==1" v-for="(item,index) in new_wenzhang" @click="to_new_shipin(index)">
					<view class="shipin_user">
						<view class="user_img">
							<image :src="item.user_img" mode=""></image>
						</view>
						<view class="username">
							{{item.user_name}}
						</view>
					</view>
					
					<view class="shipin_img">
						<image :src="item.wz_img" mode="widthFix"></image>
						<view class="shipin_title">
							{{item.wz_title}}
						</view>
					</view>
					
				</view>
			</view>
		</view>

		<view class="cent2" v-show="cent==2">
			<view class="tab">
				<view class="tab-box">
					<view class="text" :class="{'active':isActive2==1}" @click="checked2(1)">全部
						<view class="text-bot"></view>
					</view>
					<view class="text" :class="{'active':isActive2==2}" @click="checked2(2)">精选
						<view class="text-bot"></view>
					</view>
					<view class="text" :class="{'active':isActive2==3}" @click="checked2(3)">视频
						<view class="text-bot"></view>
					</view>
			
			
				</view>
			</view>
			<!-- 第一界面 -->
			<view :class="{'nav_item':isActive2==1}" v-if="isActive2==1">
				<view class="lunbo">
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" circular="true">
						<swiper-item>
							<view class="swiper-item">
								<image src="https://img0.baidu.com/it/u=3239053483,1881076718&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657990800&t=206ffed6456805d4f28ec3625a41314c"							
								mode=""></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image src="https://img0.baidu.com/it/u=15033324,253441159&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" mode="">
								
								
								</image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image src="https://img1.baidu.com/it/u=2302692214,4072103668&fm=253&fmt=auto&app=120&f=JPEG?w=450&h=601" mode="">
								</image>
							</view>
						</swiper-item>
						
					</swiper>
				</view>
				<view class="news" v-show="item.type==0" @click="to_old_wenzhang(index)"  v-for="(item,index) in old_wenzhang">
					<view class="news_title">
						<rich-text :nodes="item.wz_title"></rich-text>
					</view>
					<view class="news_buttom">
						<view class="news_img">
							<image :src="item.wz_img" mode=""></image>
						</view>
						<view class="news_main">
							<view class="news_cont">
								<rich-text :nodes="item.wz_content"></rich-text>
							</view>
							<view class="news_peo">
								<rich-text :nodes="item.user_name"></rich-text>
							
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="wenzhang">
					<scroll-view class="find_scl"  
						> 
						<view class="scr_left">
							<block>
								<view class="img_view" @click="to_old_wenzhang">
									<view class="scr_img">
										<image src="../../static/logo.png" mode="widthFix" 
											></image>
									</view>
									<view class="jieshao">
										<view class="people_title">
											反诈人人有责反诈人人有责反诈人人有责反诈人人有责反诈人人有责
										</view>
										<view class="people_inf">
											<view class="people_img">
											<image src="../../static/logo.png" mode="widthFix"
												></image>
										</view>	
										<view class="people_name">
											@蜡笔小新
										</view>
										</view>
									</view>
									
									
								</view>
							</block>
							<block>
								<view class="img_view" style="border: #000000 solid 1px;" @click="to_shipin">
									<view class="scr_img">
										<image src="https://img95.699pic.com/video_cover/90/94/78/a_V5i9vHwasX621656909478.jpg!/both/654x376" mode="widthFix" 
											></image>
									</view>
									<view class="jieshao">
										<view class="people_title">
											反诈人人有责反诈人人有责反诈人人有责反诈人人有责反诈人人有责
										</view>
										<view class="people_inf">
											<view class="people_img">
											<image src="../../static/logo.png" mode="widthFix"
												></image>
										</view>	
										<view class="people_name">
											@蜡笔小新
										</view>
										</view>
									</view>
									
									
								</view>
							</block>
						</view>
						<view class="scr_right">
							<block>
								<view class="img_view">
									<view class="scr_img">
										<image src="https://img95.699pic.com/video_cover/90/94/78/a_V5i9vHwasX621656909478.jpg!/both/654x376" mode="widthFix" 
											></image>
									</view>
									<view class="jieshao">
										<view class="people_title">
											反诈人人有责反诈人人有责反诈人人有责反诈人人有责反诈人人有责
										</view>
										<view class="people_inf">
											<view class="people_img">
											<image src="../../static/logo.png" mode="widthFix"
												></image>
										</view>	
										<view class="people_name">
											@蜡笔小新
										</view>
										</view>
									</view>
									
									
								</view>
							</block>
							<block>
								<view class="img_view">
									<view class="scr_img">
										<image src="https://img95.699pic.com/video_cover/90/94/78/a_V5i9vHwasX621656909478.jpg!/both/654x376" mode="widthFix" 
											></image>
									</view>
									<view class="jieshao">
										<view class="people_title">
											反诈人人有责反诈人人有责反诈人人有责反诈人人有责反诈人人有责
										</view>
										<view class="people_inf">
											<view class="people_img">
											<image src="../../static/logo.png" mode="widthFix"
												></image>
										</view>	
										<view class="people_name">
											@蜡笔小新
										</view>
										</view>
									</view>
									
									
								</view>
							</block>
						</view>
				
					</scroll-view>
				
				</view> -->
				
			</view>
			<!-- 第二个界面 -->
			<view :class="{'nav_item':isActive2==2}" v-if="isActive2==2">
				<view class="wenzhang" >
					<scroll-view class="find_scl" scroll-y="true" key="key"
						
						> 
						<view class="scr_left" >
							
							<block v-for="(item,index) in old_wenzhang">
								<view class="img_view" v-if="item.type==0&&index%2==0"  @click="to_old_wenzhang(index)">
									<view class="scr_img">
										<image :src="item.wz_img" mode="widthFix" 
											></image>
									</view>
									<view class="jieshao">
										<view class="people_title">
											{{item.wz_title}}
										</view>
										<view class="people_inf">
											<view class="people_img">
											<image :src="item.user_img" mode="widthFix"
												></image>
										</view>	
										<view class="people_name">
											{{item.user_name}}
										</view>
										</view>
									</view>
									
									
								</view>
							
								<view class="img_view" v-if="item.type==1&&index%2==0" @click="to_old_shipin(index)">
									<view class="scr_img">
										<image :src="item.wz_img" mode="widthFix" 
											></image>
									</view>
									<view class="jieshao">
										<view class="people_title">
											{{item.wz_title}}
										</view>
										<view class="people_inf">
											<view class="people_img">
											<image :src="item.user_img" mode="widthFix"
												></image>
										</view>	
										<view class="people_name">
											{{item.user_name}}
										</view>
										</view>
									</view>
									
									
								</view>
							</block>
							
							
						</view>
						<view class="scr_right"  >
							<block  v-for="(item,index) in old_wenzhang">
								<view class="img_view" v-if="item.type==0&&index%2==1"  @click="to_old_wenzhang(index)">
									<view class="scr_img">
										<image :src="item.wz_img" mode="widthFix" 
											></image>
									</view>
									<view class="jieshao">
										<view class="people_title">
											{{item.wz_title}}
										</view>
										<view class="people_inf">
											<view class="people_img">
											<image :src="item.user_img" mode="widthFix"
												></image>
										</view>	
										<view class="people_name">
											{{item.user_name}}
										</view>
										</view>
									</view>
									
									
								</view>
						
								<view class="img_view" v-if="item.type==1&&index%2==1"  @click="to_old_shipin(index)">
									<view class="scr_img">
										<image :src="item.wz_img" mode="widthFix" 
											></image>
									</view>
									<view class="jieshao">
										<view class="people_title">
											{{item.wz_title}}
										</view>
										<view class="people_inf">
											<view class="people_img">
											<image :src="item.user_img" mode="widthFix"
												></image>
										</view>	
										<view class="people_name">
											{{item.user_name}}
										</view>
										</view>
									</view>
									
									
								</view>
							</block>
						</view>
				
					</scroll-view>
				
				</view>
			</view>
			<!-- 第三个界面 -->
			<view :class="{'nav_item':isActive2==3}" v-if="isActive2==3">
				<view class="shipin" v-if="item.type==1" v-for="(item,index) in old_wenzhang" @click="to_old_shipin(index)">
					<view class="shipin_user">
						<view class="user_img">
							<image :src="item.user_img" mode=""></image>
						</view>
						<view class="username">
							{{item.user_name}}
						</view>
					</view>
					
					<view class="shipin_img">
						<image :src="item.wz_img" mode="widthFix"></image>
						<view class="shipin_title">
							{{item.wz_title}}
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				cent: "1",
				title_l:true,
				title_r:false,
				isActive1: 1,
				isActive2: 1,
				
				people: [{
						"name": "蜡笔小新1",
						"introduce": "1"
				
					},
					{
						"name": "蜡笔小新2",
						"introduce": "2"
					},
					{
						"name": "蜡笔小新3",
						"introduce": "3"
					}
				],
				new_wenzhang:[],
				old_wenzhang:[]
			}
		},
		onLoad() {
			var that = this;
			var data = require("static/data/new_wenzhang.json");
			that.new_wenzhang = data["new_wenzhang"];
			// console.log(that.wenzhang)
		},
		methods: {
			title1(){
				this.title_l=true;
				this.title_r=false;
				this.cent=1;
			},
			title2(){
				this.title_l=false;
				this.title_r=true;
				this.cent=2;
				var that = this;
				var data = require("static/data/old_wenzhang.json");
				that.old_wenzhang = data["old_wenzhang"];
			},
			checked1(type) {
				this.isActive1 = type;
				
			},
			checked2(type) {
				this.isActive2 = type;
				
			},
			to_leixing(){
				uni.navigateTo({
					url:"./leixing/leixing"
				})
			},
			to_duice(){
				uni.navigateTo({
					url:"./duice/duice"
				})
			},
			to_new_wenzhang(e){
				console.log("shuzu"+e)
		
				uni.navigateTo({
					url:"./wenzhang/new_wenzhang?id="+this.new_wenzhang[e].id
				})
			},
			to_new_shipin(e){
				console.log("shuzu"+e)
			
				 console.log()
				uni.navigateTo({
					url:"./shipin/new_shipin?id="+this.new_wenzhang[e].id
				})
			},
			to_old_wenzhang(e){
				console.log("shuzu"+e)

				uni.navigateTo({
					url:"./wenzhang/old_wenzhang?id="+this.old_wenzhang[e].id
				})
			},
			to_old_shipin(e){
				console.log(e)

				uni.navigateTo({
					url:"./shipin/old_shipin?id="+this.old_wenzhang[e].id
				})
			},
		}
	}
</script>

<style>
	
	
	/* badbf0  E6E5E5*/
	page{
		background-image: url(/static/img/backbg.jpg);
		background-repeat:no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed
	}
	.content{
		/* border: solid 1px red; */
		position: absolute;
		padding-top: 20rpx;
		box-sizing: border-box;
		/* margin-left: 25rpx; */
	}
	
	.title1,.title2
	{
		/* border: 1px solid red; */
		width: 200rpx;
		height: 100rpx;
		box-shadow: 2px -5px 9px 1px #ccc;
		text-align: center;
		line-height: 100rpx;
		position: relative;
		background-color: #E6E5E5;
		/* background-color: aqua; */
		float: left;
		margin-left: 25rpx;
		border-radius:25rpx 25rpx 0 0;
	}
	.indx{
		/* border: solid 1px red; */
		z-index: 100;
		background-color: #badbf0;
		
	}
	.title1{
		float: left;
		margin-left: 25rpx;
		
	}
	.title2 {
		
		float: right;
		margin-right: 27rpx;
	}

	.cent1{
		float: left;
		/* border: solid 1px red; */
		width: 700rpx;
		/* height: 500rpx; */
		box-shadow: 0px -3px 10px 3px #ccc;
		padding: 20rpx;
		box-sizing: border-box;
		margin-left: 25rpx;
		position: relative;
		border-top-right-radius:25rpx;
		z-index: 50;
		background-color: #cce2f0;
		padding-bottom: 100rpx;
	}
	.cent2{
		float: left;
		/* border: solid 1px red; */
		width: 700rpx;
		/* height: 500rpx; */
		box-shadow: 0px -3px 10px 3px #ccc;
		padding: 20rpx;
		box-sizing: border-box;
		margin-left: 25rpx;
		position: relative;
		border-top-left-radius:25rpx;
		z-index: 50;
		background-color: #cce2f0;
		padding-bottom: 100rpx;
	}
	.tab {
		/* border: #007AFF solid 1px; */
		margin-top: 10rpx;
		width: 100%;
		height: 80rpx;
		/* margin-bottom: 20rpx; */
		/* background-color: #ffe9e9; */
		/* position: sticky;
		top: 100rpx;
		z-index: 100; */
	}
	
	.tab-box {
		/* border: #0000FF solid 1px; */
		width: 700rpx;
		height: 60rpx;
		margin: auto;
		padding-top: 15rpx;
		display: flex;
	
	
	}
	
	.text {
		/* border: #000000 solid; */
		width: 150rpx;
		height: 60rpx;
		text-align: center;
		position: relative;
		
	}
	
	.text-bot {
		position: absolute;
		top: 50%;
		left: 24%;
		z-index: -10;
		/* border: #007AFF solid 1px; */
		width: 70rpx;
		height: 15rpx;

		margin: auto;
		transition: background 0.4s;
	}
	
	.active .text-bot {
		/* border-top: #e63e3b solid 3.5px; */
		background-image: url(/static/img/underline.png);
		/* background-color: #007AFF; */
		background-repeat: no-repeat;
		/* height: 10rpx; */
		border-radius: 10rpx;
		background-size: contain;
		     /* background-attachment: fixed; */
	
	}
	
	.nav_item * {
		animation: fade-in;
		/*动画名称*/
		animation-duration: 0.2s;
		/*动画持续时间*/
	}
	
	@keyframes fade-in {
		0% {
			opacity: 0;
		}
	
		/*初始状态 透明度为0*/
		20% {
			opacity: 0.3;
		}
	
		50% {
			opacity: 0.5;
		}
	
		/*过渡状态 透明度为0*/
		100% {
			opacity: 1;
		}
	
		/*结束状态 透明度为1*/
	}
	.find_scl {
		/* border: #000000 solid 1px; */
		display: flex;
		width: 100%;
		padding-bottom: 20rpx;  
	}
	
	
	
	.scr_left {
		/* border: #000000 solid 1px; */
		display: flex;
		display: inline-block;
		flex-direction: column;
		width:315rpx;
		/* margin-top: 20rpx; */
		border-radius: 20rpx;
	}
	
	.scr_right {
		
		display: flex;
		display: inline-block;
		float: right;
		flex-direction: column;
		width: 315rpx;
		/* margin-top: 20rpx; */
		border-radius: 20rpx;
	}
	.img_view {
		/* border: #000000 solid 1px; */
		background: #F0F8FF; 
		border-radius: 20rpx;
		width: 315rpx;
		padding-bottom: 10rpx;
		margin-bottom: 20rpx;
		box-shadow:  3rpx 3rpx 10rpx 1rpx #9c9c9c;
		
	}
	
	
	.scr_img {
		width: 315rpx;
		border-radius: 20rpx;
		/* border: #000000 solid 1px; */ 
	}
	.scr_img image{
	  
		width: 315rpx;
		border-radius: 20rpx;
	}
	.jieshao{
		/* border: #000000 solid 1px; */
		
		/* position: relative; */
	}
	.people_img{
		/* border:  solid #000000 1px; */
		width: 40rpx;
		height: 40rpx;
		background-color: #f0db34;
		padding: 3rpx;
		border-radius: 50%;
		margin-left: 10rpx;
		float: left;
	}
	.people_img image{
		/* border: #000000 solid 1px; */
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	} 
	.people_inf{
		height: 50rpx;
	}
	.people_name{
		/* border:  solid #000000 1px; */
		dispaly:inline-block;
		margin-left: 70rpx;  
		line-height:50rpx;
		overflow: hidden;
		display: -webkit-box;
		    -webkit-line-clamp: 1;
		    -webkit-box-orient: vertical;
	}
	.people_title{ 
		padding: 10rpx;
		
	}
	
	
	
	.lunbo {
		border-radius: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.lunbo swiper {
		border-radius: 30rpx;
		width: 100%;
		height: 250rpx;
	
	}
	
	.lunbo swiper image {
		border-radius: 30rpx;
		width: 100%;
		height: 250rpx;
	}
	
	.show {
			/* border: #000000 solid 1px; */
			width: 100%;
			height: 120rpx;
			margin-bottom: 20rpx;
		}
		.leixing,.duice{
			border-radius:30rpx;
			/* background-color: #008000; */
			width: 320rpx;
			height: 100%;
			overflow: hidden;
			text-align: center;
			position: relative;
			
		}
		.leixing{
			
			margin-right: 20rpx;
			float: left;
			
		}
		.duice{
			float: right;
		}
		.show_name{
			width:320rpx ;
			/* border: red solid 1px; */
			position: absolute;
			transform: translate(-50%, -50%);
			top: 50%;
			left: 50%;
			z-index: 100;

			/* line-height: 100rpx; */
			font-size: 48rpx;
			font-weight: 500;
			/* text-shadow:3rpx 3rpx 3rpx  #c8d6d4; */
			letter-spacing:10rpx
			
		}
		.leixing>image,.duice>image{
			
			width: 100%;
			height: 100%;
			
			opacity:1;
		} 
			
	
	.news{
		/* border: #000000 solid 1px; */
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: aliceblue;
		margin-bottom: 20rpx;
		
	}
	.news_title{
		color: #002992;
		font-size: 40rpx;
		font-weight: bolder;
	}
	.news_buttom{
		/* border: #000000 solid 1px; */
		/* height: 200rpx; */
		display: flex;
		flex-direction: row;
	}
	.news_img{
		/* border: #000000 solid 1px; */
		width: 200rpx;
		/* height: 200rpx; */
		border-radius: 30rpx;
		overflow: hidden;
		/* float: left; */
		margin-right: 20rpx;
	}
	.news_img image{
		width: 100%;
		height: 100%;
	}
	.news_main{
		/* border: #000000 solid 1px; */
		width: 390rpx;
		/* height: 100rpx; */
		float: left;
	}
	.news_cont{
		width: 100%;
		/* height: 150rpx; */
		overflow: hidden;
		/* text-overflow: clip; */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 10rpx;
		line-height: 35rpx;
	}
	.news_peo{
		font-size: 26rpx;
	}
	
	
	.tuijian {
		/* background-color: #BBBCBE; */
		width: 100%;
		height: 130rpx;
		border-radius: 20rpx;
		display: flex;
		overflow-y: auto;
	
	
	}
	
	.cainixihuan {
		/* border: #000000 solid 1px; */
		width: 100rpx;
		height: 130rpx;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
		background: linear-gradient(to right, rgba(255, 185, 7, 1.0), rgba(255, 255, 255, 0));
	
		position: absolute;
		z-index: 10;
	}
	
	.cainixihuan text {
		line-height: 80rpx;
		letter-spacing: 6rpx;
		writing-mode: vertical-lr;
		text-align: center;
		font-size: 24rpx;
	}
	
	.mb {
		width: 100rpx;
		height: 130rpx;
	
	}
	
	.mb2 {
		width: 100rpx;
		height: 130rpx;
	}
	
	.yonghu {
		border-radius: 20rpx;
		height: 100%;
		width: 530rpx;
		display: flex;
		background: #ffc227;
		align-items: center;
		float: left;
		margin-right: 20rpx;
	}
	
	.yonghu_left {
		width: 110rpx;
		height: 110rpx;
		margin: 10rpx;
		border-radius: 50%;
		overflow: hidden;
	
	}
	
	.yonghu_left image {
		width: 100%;
		height: 100%;
	}
	
	.yonghu_center {
		width: 250rpx;
		height: 130rpx;
	}
	
	.yonghu_center_name {
		margin-top: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.yonghu_center_introduce {
		height: 60rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 30rpx;
		color: #959595;
	}
	
	.yonghu_right {
		border: #000000 solid 1px;
		border-radius: 50rpx;
		width: 150rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		margin: 10rpx;
	}
	.shipin{
		/* border: red solid 1px; */
		width: 100%;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}
	.shipin_user{
		/* border: red solid 1px; */
		width: 100%;
		height: 100rpx;
		margin-bottom: 10rpx;
	}
	.user_img{
		width: 100rpx;
		height: 100rpx;
		float: left;
		margin-left: 20rpx;
		border-radius: 50%;
		box-shadow: 2rpx 2rpx 5rpx 5rpx #ccc;
	}
	.user_img image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.username{
		/* border:  red solid 1px; */
		
		width: 300rpx;
		height: 100rpx;
		margin-left: 20rpx;
		float: left;
		font-size: 36rpx;
		line-height: 100rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp:1;
		-webkit-box-orient: vertical;
	}
	
	.shipin_img{
		width: 100%;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
	}
	
	.shipin image{
		width: 100%;
	}
	.shipin_title{
		/* border:  red solid 1px; */
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0rpx 20rpx;

		box-sizing: border-box;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp:1;
		-webkit-box-orient: vertical;
		font-size: 40rpx; 
		color: #002992;
		font-weight: bold;
		position: absolute;
		bottom: 0;
		background: linear-gradient(to top, rgba(214, 214, 214) 0%, rgba(179,205,220,0.8));
		/* opacity: 0.7; */
	}
</style>
